.index-page{
	// background-color: #c00;
	.section{
		.opacity(0);
		background-color:#fff;
		background-position: center center;
		background-repeat: no-repeat;

		&.section1{background-image:url("../img/p1.jpg");}
		&.section2{background-image:url("../img/p2.jpg");}
		&.section3{background-image:url("../img/p3.jpg");}
		&.section4{background-image:url("../img/p4.jpg");}

		.main-panel{
			.est-layout-page( @main-width );
			position: relative;
			height: 100%;
			.panel-txt{
				width: 100%;
				position: absolute;
				top: 28%;
			}
			h2{
				padding-bottom: 40px;
			}
			p{
				padding-bottom: 40px;
			}
			.panel-detail{
				.inline-block();
				.box-sizing(border-box);
				.size(200px, 70px);
				.transition(0.3s ease);
				line-height: 70px;
				text-decoration: none;
			}
		}
	}
	.section1{
		.main-panel{
			@color-theme: #8d683b;
			color: @color-theme;
			text-align: center;
			h2{
				.transition(0.3s 0s);
				.transform( translateY(50px) );
				.opacity(0);
				font-size: 64px;
			}
			p{
				.transition(0.3s 0.1s);
				.transform( translateY(50px) );
				.opacity(0);
				font-size: 24px;
			}
			.panel-detail{
				.transition(0.3s 0.2s);
				.transform( translateY(50px) );
				.opacity(0);
				.rgba-background( rgba(255,255,255,0.7) );
				color: @color-theme;
				font-size: 26px;
				margin: auto;
				&:hover{
					.rgba-background( rgba(255,255,255,0.8) );
					color: @color-theme *0.8;
				}
			}
		}
		//animation
		&.active{
			.main-panel{
				h2{
					.transition(0.3s 0.5s);
					.transform( translateY(0px) );
					.opacity(100);
				}
				p{
					.transition(0.3s 0.6s);
					.transform( translateY(0px) );
					.opacity(100);
				}
				.panel-detail{
					.transition(transform 0.3s 0.7s, background 0.3s 0s, color 0.3s 0s, opacity 0.3s 0.7s);
					.transform( translateY(0px) );
					.opacity(100);
				}
			}
		}
	}
	.section2{
		.main-panel{
			@color-theme:#fff;
			color: @color-theme;
			text-align: right;
			h2{
				.transition(0.4s 0.1s);
				.transform(translateX(100%));
				.opacity(0);
				font-size: 60px;
			}
			p{
				.transition(0.4s 0.2s);
				.transform(translateX(100%));
				.opacity(0);
				font-size: 26px;
				line-height: 38px;
			}
			.panel-detail{
				.transition(0.4s 0.3s);
				.transform(translateX(100%));
				.opacity(0);
				.rgba-background( rgba(0,0,0,0.7) );
				text-align: center;
				color: @color-theme;
				font-size: 26px;
				margin: auto;
				border: 1px solid #eceee9;
				&:hover{
					.rgba-background( rgba(0,0,0,0.8) );
					color: @color-theme *0.8;
				}
			}
		}
		// animations 
		&.active{
			.main-panel{
				h2{
					.transition(0.4s 0.5s);
					.transform( translateX(0) );
					.opacity(100);
				}
				p{
					.transition(0.4s 0.6s);
					.transform( translateX(0) );
					.opacity(100);
				}
				.panel-detail{
					.transition(transform 0.4s 0.7s, background 0.4s 0s, color 0.4s 0s, opacity 0.4s 0.7s);
					.transform( translateX(0) );
					.opacity(100);
				}
			}
		}
	}
	.section3{
		.main-panel{
			@color-theme:#024683;
			color: @color-theme;
			text-align: center;
			.panel-txt{
				h2{
					.transition(0.3s 0s);
					.opacity(50);
					font-size: 50px;
					color: @color-theme;
					text-shadow: 0 0 8px @color-theme;
					text-shadow: 0 0 8px 0.1px @color-theme;
				}
				p{
					.transition(0.3s 0.1s);
					.opacity(50);
					font-size: 26px;
					color: @color-theme;
					text-shadow: 0 0 8px @color-theme;
					text-shadow: 0 0 8px 0.1px @color-theme;
				}
				.panel-detail{
					.transition(0.3s 0.2s);
					.transform(scale(0));
					.rgba-background( rgba(255,255,255,0.7) );
					text-align: center;
					color: @color-theme;
					font-size: 26px;
					margin: auto;
					border: 1px solid @color-theme;
					&:hover{
						.rgba-background( rgba(240,240,240,0.9) );
						color: @color-theme *0.8;
					}
				}
			}
		}
		&.active{
			.main-panel{
				@color-theme: #024683 ;
				h2{
					.transition(0.4s 0.8s);
					.blurry-text(#024683, 0px);
					.opacity(100);
					color: @color-theme;
					text-shadow: 0 0 0px @color-theme;
					text-shadow: 0 0 0px 0.1px @color-theme;
				}
				p{
					.transition(0.4s 0.9s);
					.blurry-text(#024683, 0px);
					.opacity(100);
					color: @color-theme;
					text-shadow: 0 0 0px @color-theme;
					text-shadow: 0 0 0px 0.1px @color-theme;
				}
				.panel-detail{
					.transition(transform 0.4s 1s, background 0.4s 0s, color 0.4s 0s);
					.transform(scale(1));
				}
			}
		}
	}
	.section4{
		.main-panel{
			@color-theme:#303e4d;
			color: @color-theme;
			.panel-txt{
				top: 18%;
				h2{
					.transition(0.4s 0.1s ease-in);
					.opacity(0);
					.transform( translateX(-100%) );
					font-size: 50px;
				}
				p{
					.transition(0.4s 0.2s ease-in);
					.opacity(0);
					.transform( translateX(-100%) );
					font-size: 24px;
					line-height: 40px;
					padding-bottom: 28px;
				}
				.panel-detail{
					.transition(0.4s 0.3s ease-in);
					.opacity(0);
					.transform( translateX(-100%) );
					.rgba-background( rgba(255,255,255,0.2) );
					text-align: center;
					color: @color-theme;
					font-size: 26px;
					margin: auto;
					border: 1px solid @color-theme;
					&:hover{
						.rgba-background( rgba(255,255,255,0.8) );
						color: @color-theme *0.8;
					}
				}
			}
			.panel-img{
				.absolute(17.25%,0,_,_);
				.transition(0.4s 0s ease-in);
				.opacity(0);
				.transform( translateY(50%) );
				width: 894px;
				img{
					width: 100%;
				}
			}
		}
		&.active {
			.main-panel{
				h2{
					.transition(0.4s 0.5s ease-out);
					.transform( translateX(0) );
					.opacity(100);
				}
				p{
					.transition(0.4s 0.6s ease-out);
					.transform( translateX(0) );
					.opacity(100);
				}
				.panel-detail{
					.transition(opacity 0.4s 0.7s ease-out, transform 0.4s 0.7s ease-out, background-color 0.4s 0s);
					.transform( translateX(0) );
					.opacity(100);
				}
				.panel-img{
					.transition(transform 0.4s 0.6s ease-out, background 0.4s 0s, color 0.4s 0s, opacity 0.4s 0.6s ease-out);
					.opacity(100);
					.transform( translateY(0) );
				}
			}
		}
	}
	.section5{
		padding-bottom: 50px;
	}
}